<template>
  <el-table-column
    v-bind="column"
    v-on="$listeners"
    :show-overflow-tooltip="column.tooltip || true"
    :align="column.align || 'left'"
    :width="column.width || 'auto'"
    :fixed="column.fixed"
  >
    <template slot="header" slot-scope="scope">
      <span>{{ scope.column.label }}</span>
    </template>
    
    <template slot-scope="scope">
      <vRender :scope="scope" :render="column.render" />
    </template>
  </el-table-column>
</template>
<script>
/* eslint-disable */
import vRender from "./render";
import vForced from "./forced";

export default {
  name: "column",
  components: { vRender },
  props: {
    column: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    column: {
      handler: "renderColumn",
      immediate: true,
    },
  },
  methods: {
    renderColumn() {
      const { column } = this;
      // 索引：index
      if (column.type) {
        // column.renderHeader = vForced[column.type].renderHeader;
        column.render = column.render || vForced[column.type].renderCell;
      }

      // 渲染成text
      if (!column.render) {
        column.render = (h, scope) => {
          return <span>{scope.row[scope.column.property]}</span>;
        };
      }

      return column;
    },
  },
};
</script>